<!--
 * @Author: krsea 965837746@qq.com
 * @Date: 2025-03-09 11:33:52
 * @LastEditors: krsea 965837746@qq.com
 * @LastEditTime: 2025-03-09 11:51:08
 * @FilePath: \vue3-code\2306\week3t\计算器1.html
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Mini Calculator</title>
    <style>
        body{ margin: 20px; }
        #app{
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 175px;
            height: 285px;
            padding: 10px;
        }
        #app .btn{
            width: 40px;
            height: 40px;
            border: 1px solid #ccc;
            border-radius: 2px;
            background-color: white;
            margin-bottom:10px;
            cursor: pointer;
            color: #666;
            font-weight: bold;
        }
        #app .btn-double{
            width: 84px;
            height: 40px;
        }
        #input-box{
            text-align: right;
            width: 161px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 2px;
            padding: 0 5px;
            margin-bottom: 10px;
            background-color: white;
            color: #666;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <father></father>
    </div>
    <script>
        const VUE = window.Vue;

        VUE.component('son', {
            template: "<input id='input-box' type='text' :value='display' />",
            props: ['display']
        });

        VUE.component('father', {
            template: `
                <div>
                    <son :display="msg"></son>
                    <input class='btn' type='button' value='C' @click="symbol(1)" />
                    <input class='btn' type='button' value='-/+' @click="symbol(2)" />
                    <input class='btn' type='button' value='*' @click="symbol(3)" />
                    <input class='btn' type='button' value='÷' @click="symbol(4)" />
                    <input class='btn' type='button' value='1' @click="handleClick(1)" />
                    <input class='btn' type='button' value='2' @click="handleClick(2)" />
                    <input class='btn' type='button' value='3' @click="handleClick(3)" />
                    <input class='btn' type='button' value='-' @click="symbol(5)" />
                    <input class='btn' type='button' value='4' @click="handleClick(4)" />
                    <input class='btn' type='button' value='5' @click="handleClick(5)" />
                    <input class='btn' type='button' value='6' @click="handleClick(6)" />
                    <input class='btn' type='button' value='+' @click="symbol(6)" />
                    <input class='btn' type='button' value='7' @click="handleClick(7)" />
                    <input class='btn' type='button' value='8' @click="handleClick(8)" />
                    <input class='btn' type='button' value='9' @click="handleClick(9)" />
                    <input class='btn' type='button' value='%' @click="symbol(7)" />
                    <input class='btn' type='button' value='0' @click="handleClick(0)" />
                    <input class='btn' type='button' value='.' @click="point" />
                    <input class='btn-double' type='button' value='=' @click="symbol(8)" />
                </div>
            `,
            data() {
                return {
                    msg: '0',
                    previousNumber: null,
                    operator: null,
                    lastActionWasOperator: false
                }
            },
            methods: {
                handleClick(number) {
                    if (this.msg === 'Error') return;
                    if (this.lastActionWasOperator) {
                        this.msg = number.toString();
                    } else {
                        if (this.msg === '0') this.msg = number.toString();
                        else this.msg += number.toString();
                    }
                    this.lastActionWasOperator = false;
                },
                symbol(type) {
                    if (this.msg === 'Error') {
                        if (type === 1) {
                            this.msg = '0';
                            this.previousNumber = null;
                            this.operator = null;
                            this.lastActionWasOperator = false;
                        }
                        return;
                    }
                    if (type === 1) {
                        this.msg = '0';
                        this.previousNumber = null;
                        this.operator = null;
                        this.lastActionWasOperator = false;
                    } else if (type === 2) {
                        this.msg = (parseFloat(this.msg) * -1).toString();
                        this.lastActionWasOperator = false;
                    } else if (type >= 3 && type <= 6) {
                        let operatorMap = {3: '*', 4: '÷', 5: '-', 6: '+'};
                        let newOperator = operatorMap[type];
                        if (this.operator != null) {
                            let result = this.calculate(this.previousNumber, this.msg, this.operator);
                            if (result === 'Error') {
                                this.msg = 'Error';
                                this.previousNumber = null;
                                this.operator = null;
                                return;
                            }
                            this.msg = result.toString();
                            this.previousNumber = result;
                        } else {
                            this.previousNumber = parseFloat(this.msg);
                        }
                        this.operator = newOperator;
                        this.lastActionWasOperator = true;
                    } else if (type === 7) {
                        this.msg = (parseFloat(this.msg) / 100).toString();
                        this.lastActionWasOperator = false;
                    } else if (type === 8) {
                        if (this.previousNumber != null && this.operator != null) {
                            let result = this.calculate(this.previousNumber, this.msg, this.operator);
                            if (result === 'Error') {
                                this.msg = 'Error';
                                this.previousNumber = null;
                                this.operator = null;
                            } else {
                                this.msg = result.toString();
                                this.previousNumber = result;
                                this.operator = null;
                            }
                        }
                        this.lastActionWasOperator = false;
                    }
                },
                point() {
                    if (this.msg === 'Error') return;
                    if (this.msg.indexOf('.') === -1) this.msg += '.';
                    this.lastActionWasOperator = false;
                },
                calculate(a, b, op) {
                    a = parseFloat(a);
                    b = parseFloat(b);
                    if (op === '÷' && b === 0) return 'Error';
                    switch(op) {
                        case '+': return a + b;
                        case '-': return a - b;
                        case '*': return a * b;
                        case '÷': return a / b;
                        default: return 'Error';
                    }
                }
            }
        });

        new VUE({ el: '#app' });
    </script>
</body>
</html>
